// 基础地址 设置成常数
const BASE_URL = 'http://110.41.43.118:3008';


let oUsername = document.querySelector('.username');
let oUsernameMsg = document.querySelector('.username-msg');
let oCode = document.querySelector('.code');
let oCodeTxt = document.querySelector('.code-txt');
let oCodeBtn = document.querySelector('.code-btn');
let oCodeMsg = document.querySelector('.code-msg');
let oPassword = document.querySelector('.password');
let aPwdStrengthSpan = document.querySelectorAll('.pwd-strength span');
let oPasswordMsg = document.querySelector('.password-msg');
let oPwdConfirm = document.querySelector('.pwd-confirm');
let oConfirmMsg = document.querySelector('.confirm-msg');
let oAgreement = document.querySelector('.agreement');
let oRegisterBtn = document.querySelector('.register-btn');

// 元素的状态
let usernameStatus = false;
let codeStatus = false;
let pwdStatus = false;
let confirmStatus = false;
let agreementStatus = false;


// 验证的交互效果封装
function msgRender(obj=null, objMsg=null, isShow='block', color='red', txt='', borderColors='transparent'){
	objMsg.style.display = isShow;
	objMsg.style.color = color;
	objMsg.innerHTML = txt;
	// console.log(obj);
	obj.style.borderColor = borderColors;
}

// 验证 用户名
oUsername.onblur = function(){
	// 前端校验 正则 
	let re = /^[0-9a-zA-Z_]{3,12}$/g;
	if( !re.test(oUsername.value )){
		msgRender(oUsername, oUsernameMsg,'block', 'red', '用户名必须由3-12位字母数字下划线组成', 'red');
		usernameStatus = false;
		return;
	};
	// 前端验证通过
	// oUsername.style.border = '1px solid transparent';
	
	// 验证后台数据
	lb.ajax({
		method : 'post',
		url : BASE_URL + '/api_user',
		data : {username: oUsername.value, status: 'check'},
		success(res){
			// console.log(res);
			if( res.code != 0){
				console.log(res);
				msgRender(oUsername, oUsernameMsg, 'block', 'red', '用户名已存在', 'red');
				usernameStatus = false;
				return;
			}
			
			// 通过验证
			msgRender(oUsername, oUsernameMsg, 'block', 'green', '用户名可用', 'transparent');
			usernameStatus = true;
		},
		
		
	});
	
};

// 累加验证码结果
let codeStr = '';
// console.log(oCode);
// 验证 验证码
oCode.onkeyup = function(){
	// 按下键盘打印出验证码
	// console.log(codeStr);
	// console.log(oCode);
	// 验证
	if(codeStr.toLowerCase() != this.value.toLowerCase() ){
		// 验证码不匹配
		msgRender(this, oCodeMsg, 'block', 'red', '验证码错误', 'red');
		codeStatus = false;
		return;
	}
	// 通过验证
	msgRender(this, oCodeMsg, 'block', 'green', '验证码正确', 'transparent');
	codeStatus = true;
};

// 验证 密码
oPassword.onkeyup = function(){
	let re = /^[0-9]{6,12}$/g;
	if( !re.test(this.value) ){
		msgRender(this, oPasswordMsg, 'block', 'red', '密码是6-12位数字', 'transparent');
		// 密码不满足要求，密码强度颜色为默认颜色
		strengthColor();
		pwdStatus = false;
		return;
	};
	// 密码满足要求，密码强度颜色为默认颜色
	msgRender(oPassword, oPasswordMsg, 'none', 'red', '密码必须为6-12位数字', 'transparent');
	pwdStatus = true;
	
	// 验证强中弱
	strengthColor();
	
	switch(this.value.length){
		case 6:
		case 7:
			strengthColor('#E93C3C', '#fff', '#fff');
			break;
		case 8:
		case 9:
		case 10:
			strengthColor('#E93C3C', '#E5C200', '#fff');
			break;
		case 11:
		case 12:
			strengthColor('#E93C3C', '#E5C200', '#00D2E5');
			break;
	};
	
	// 封装密码强度 全部都是一个颜色
	function strengthColor(color1 = '#fff', color2 = '#fff', color3 = '#fff'){
		aPwdStrengthSpan[0].style.background = color1;
		aPwdStrengthSpan[1].style.background = color2;
		aPwdStrengthSpan[2].style.background = color3;
	};
	
	
};

// 确认密码
oPwdConfirm.onblur = function(){
	if( this.value != oPassword.value){
		msgRender(oPwdConfirm, oConfirmMsg, 'block', 'red', '两次密码不一致', 'red');
		confirmStatus = false;
		return;
	}
	// 验证通过
	msgRender(oPwdConfirm, oConfirmMsg, 'none', 'red', '确认密码成功', 'transparent');
	confirmStatus = true;
};

// 协议确定
oAgreement.onchange = function(){
	console.log(this.checked);
	agreementStatus = this.checked;
};

// 点击注册按钮
oRegisterBtn.onclick = function(){
	// console.log(oCode);
	// 判断用户名是否符合要求
	if( !usernameStatus ){
		oUsername.focus();
		msgRender(oUsername, oUsernameMsg, 'block', 'red', '用户名不可用', 'red');
		return;
	};
	// 判断验证码是否符合要求
	if( !codeStatus ){
		oCode.focus();
		msgRender(oCode, oCodeMsg, 'block', 'red', '验证码错误', 'red');
		return;
	};
	// 判断密码是否符合要求
	if( !pwdStatus ){
		oPassword.focus();
		msgRender(oPassword, oPasswordMsg, 'block', 'red', '请输入正确的密码', 'red');
		return;
	};
	// 判断确定密码是否符合要求
	if( !confirmStatus ){
		oPwdConfirm.focus();
		msgRender(oPwdConfirm, oPwdConfirmMsg, 'block', 'red', '密码不一致', 'red');
		return;
	};
	// 判断协议是否勾选
	if( !agreementStatus ){
		alert('协议未勾选，请勾选协议');
		return;
	};
	
	// 下面是注册功能的代码
	lb.ajax({
		method : 'post',
		url : BASE_URL + '/api_user',
		data : {username: oUsername.value, password: oPassword.value, status: 'register'},
		success(res){
			console.log(res);
			if( res.code != 0){
				console.log(res);
				return;
			};
			
			// 注册成功 跳转到登录界面
			window.location.href = 'login.html';
		}
	})
	
};

// 验证码
(function(){
	
	// 解构
	let {random} = Math;
	
	// 默认要显示验证码
	let codeArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U','V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
	
	// 默认调用一次，生成验证码
	getCode();
	
	// 累加验证码的生成结果
	// let codeStr = '';
	
	// 点击换一张
	oCodeBtn.onclick = getCode;
	
	//生成验证码方法
	function getCode(){
		// 清除原先的验证码
		codeStr = '';
		// 清除验证码框内原先输入的内容
		// oCode = '';
		// 换容器的背景图
		oCodeTxt.style.backgroundPosition = `${random() * 700}px ${random() * 400}px`;
		// 清除验证码
		oCodeTxt.innerHTML = '';
		
		// 创建出随机四位验证码
		for(let i=0; i<4; i++){
			// 创建Dom
			let span = document.createElement('span');
			// codeArr数组中随机
			span.innerHTML = codeArr[parseInt(random() * 62)];
			codeStr += span.innerHTML;
			
			// 随机样式
			// 随机字体大小 12-22
			span.style.fontSize = parseInt(random() * 10 + 12) + 'px';
			// 随机颜色
			span.style.color = `rgb(${random() * 255}, ${random() * 255}, ${random() * 255})`;
			// 随机斜体 加粗
			span.style.fontStyle = random() > 0.5 ? 'italic' : 'none';
			span.style.fontWeight = random() > 0.5 ? 'blod' : 'normal';
			
			// 生成一个 添加一个到容器
			oCodeTxt.appendChild(span);
		};
		console.log(codeStr);
	};
	
	
})();

